Get Started

Documentação

Get-started

Basic

Grid

Documentação

Get-started

Basic

Grid

Flex grow

Flex class

If all items have flex class, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

1 
<div class="container">
      <div class="flex">
        ...
      </div>
  </div>
1
2 
<div class="container">
    <div class="flex">
      ...
    </div>
    <div class="flex2">
      ...
    </div>
  </div>
1
2
3 
<div class="container">
    <div class="flex">
      ...
    </div>
    <div class="flex2">
      ...
    </div>
    <div class="flex3">
      ...
    </div>
  </div>
1
2 
<div class="container">
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
  </div>
1
2
3 
<div class="container">
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
  </div>
1
2
3
4 
<div class="container">
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container">
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
    <div class="flex">
      ...
    </div>
  </div>
1
2 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="flex">
      ...
    </div>
  </div>
1
2
3 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1 flex">
      ...
    </div>
  </div>
1
2
3
4 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1 flex">
      ...
    </div>
  </div>
1
2
3
4
5 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1 flex">
      ...
    </div>
  </div>
1
2
3
4
5
6 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1 flex">
      ...
    </div>
  </div>
1
2
3
4
5
6
7 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1 flex">
      ...
    </div>
  </div>
1
2
3
4
5
6
7
8 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1 flex">
      ...
    </div>
  </div>
1
2
3
4
5
6
7
8
9 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1 flex">
      ...
    </div>
  </div>
1
2
3
4
5
6
7
8
9
10 
<div class="container">
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1">
      ...
    </div>
    <div class="basis1 flex">
      ...
    </div>
  </div>